<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
</head>
<style>
	body{
		overflow: hidden;
	}
</style>

<body>
	
	<!-- MAIN -->
	<div class="main">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>商品管理</li>
			    <li>添加商品</li>
			</ul>
			<div class="container-fluid" style="display: flex;">
				<div style="width: 50%;">
					<form class="form-horizontal" role="form" id="form1" method="post" action="{%:url('Goods/goodsHandle')%}" enctype="multipart/form-data">
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">图片</label>
							<div class="col-sm-4">
								<input type="file" id="file_input" class="form-control" name="picture[]" multiple>
							</div>
							<!-- <div class="col-sm-1" id="picture-show">
								<img src="" id="preview" height="220" style="position: absolute;">
							</div> -->
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">商品类别</label>
							<div class="col-sm-4">
								<select class="form-control" name="cate_id">
									<option value=""> - 选择 - </option>
									{%volist name="categories" id="cate"%}
									<option value="{%$cate.id%}">{%$cate.type%} - {%$cate.name%}</option>
									{%/volist%}
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">品牌</label>
							<div class="col-sm-4">
								<select class="form-control" name="brand_id">
									<option value=""> - 选择 - </option>
									{%volist name="brands" id="brand"%}
									<option value="{%$brand.id%}">{%$brand.first_letter%} - {%$brand.name%}</option>
									{%/volist%}
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">商品描述</label>
							<div class="col-sm-4">
								<input type="text" class="form-control" name="description" placeholder="请输入商品描述">
							</div>
						</div>
						<!-- <div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">成本价</label>
							<div class="col-sm-4">
								<input type="number" class="form-control" name="goods_price" placeholder="请输入商品成本价">
							</div>
						</div> -->
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">尺码/规格组</label>
							<div class="col-sm-4">
								<select class="form-control" name="size_set">
									<option value="">-请选择-</option>
									{%volist name='size_sets' id='size_set' key='k'%}
									<option value="{%$k%}">{%$size_set%}</option>
									{%/volist%}
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<button type="button" class="btn btn-primary save">保存</button>
							</div>
						</div>
					</form>
				</div>
				<div style="width: 50%;overflow-y: scroll;height: 100vh;">
					<div class="col-sm-1" id="picture-show" style="display: flex;flex-wrap: wrap;align-items: center;width: 100%;padding-bottom: 100px;">
						<!-- <img src="" id="preview" height="220" style="position: absolute;"> -->
					</div>
				</div>
				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	</div>
	<!-- END MAIN -->		
	<!-- Javascript -->
	<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
	<script src="__STATIC__/assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="__STATIC__/assets/vendor/jquery.form.js"></script>
	<script src="__STATIC__/assets/vendor/layer-v3.1.1/layer/layer.js"></script>
	<!-- <script src="__STATIC__/assets/scripts/klorofil-common.js"></script> -->
	<script type="text/javascript">
		// $('#subPages').parent().siblings().();
		window.onload = function(){
			var input = document.getElementById("file_input");
			var result,div;
	
			if(typeof FileReader==='undefined'){
				result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
				input.setAttribute('disabled','disabled');
			}else{
				input.addEventListener('change',readFile,false);
			}//handler
			function readFile(){
				console.log('this.files',this.files
				);
				for(var i=0;i<this.files.length;i++){
					if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
						return alert("上传的图片格式不正确，请重新选择")}
					var reader = new FileReader();
					reader.readAsDataURL(this.files[i]);
					reader.onload = function(e){
						result = '<img height="220" src="'+this.result+'" alt=""/>';
						div = document.createElement('div');
						div.innerHTML = result;
						document.getElementById('picture-show').appendChild(div);//插入dom树                      <br>　　　　　　　　　　}
					}
				}
			}
		}
		var options = {
	        //beforeSubmit:  showRequest,  // pre-submit callback   
	        success:       function(rsp){
	        	var opt = {
	        		type: 0,
	        		content: rsp.msg,
	        		closeBtn: 0,
	        		yes: function(index) {
	        			layer.close(index); //如果设定了yes回调，需进行手工关闭
	        			if (rsp.code>0) {
				  			location.href = "{%:url('Goods/lists')%}";
				  		}
	        		}
	        	};//layer的配置项
	        	if (rsp.code==0) {
	        		opt['icon'] = 2;
	        	} else {
	        		opt['icon'] = 1;
	        	}
	        	console.log(opt);
	        	layer.open(opt);
	        }, 
	        // other available options:   
	        //url:       "{:url('Goods/goodsHandle')}",        // override for form's 'action' attribute   
	        //type:      'post',        // 'get' or 'post', override for form's 'method' attribute   
	        dataType:  'json',        // 'xml', 'script', or 'json' (expected server response type)   
	        //resetForm: true,        // reset the form after successful submit   
    	};   
   		
	    $("#form1 .save").click(function () {
            $("#form1").ajaxSubmit(options);
            return false;
        });
	    $("input[type='file']").change(function(){
	    	// $("#preview").attr("src",URL.createObjectURL($(this)[0].files[0]));
	    });
	</script>
	
</body>

</html>